<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="文章" :border-bottom="false"></fa-navbar>
		<fa-u-sticky>
			<view class="sticky" :style="[{ backgroundColor: theme.bgColor || '#2979ff' }]">
				<!-- 搜索 -->
				<view class="u-padding-15">
					<fa-search :mode="2"></fa-search>
				</u-search></view>
				<!-- 分类 -->
				<view>
					<!-- #ifdef MP-BAIDU -->
					<fa-u-tabs
						:list="categoryList"
						:is-scroll="true"
						:bg-color="theme.bgColor"
						:active-color="theme.color"
						:bar-width="catewidth"
						inactive-color="#eee"
						:current="catecur"
						@change="cateChange"
					></fa-u-tabs>
					<!-- #endif -->
					<!-- #ifndef MP-BAIDU -->
					<u-tabs
						:list="categoryList"
						:is-scroll="true"
						:bg-color="theme.bgColor"
						:active-color="theme.color"
						:bar-width="catewidth"
						inactive-color="#eee"
						:current="catecur"
						@change="cateChange"
					></u-tabs>
					<!-- #endif -->
				</view>
			</view>
		</fa-u-sticky>
		<u-gap height="190" bg-color="#ffffff"></u-gap>
		<!-- 轮播图 -->
		<view class="u-bg-white u-m-b-20 banner">
			<swiper style="height: 300rpx;width: 100%;">
				<swiper-item v-for="(item,index) in blockList" :key="index">
					<image style="height: 300rpx;width: 100%;" :src="$wanlshop.oss(item.media)" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- <u-swiper :list="vuex_config.blockList" :title="true" mode="none" :effect3d="true" @click="clickSwiper"></u-swiper> -->
		</view>
		<!-- 筛选 -->
		<view class="u-p-l-10" v-if="vuex_config.articleCate">
			<u-tabs
				:list="vuex_config.articleCate"
				:is-scroll="true"
				bg-color="#f4f6f8"
				active-color="#000"
				:bar-width="barwidth"
				inactive-color="#000"
				:current="current"
				:active-item-style="{ backgroundColor: '#fff', borderTopLeftRadius: '6rpx', borderTopRightRadius: '6rpx', boxShadow: '0 0 10px rgba(0, 87, 142, 0.1)' }"
				:bar-style="{ backgroundColor: 'rgb(255 255 255 / 0)' }"
				@change="change"
			></u-tabs>
		</view>
		<!-- 文章列表 -->
		<fa-article-items :list="article" :isCard="false"></fa-article-items>
		<!-- 空数据 -->
		<wanl-empty style="padding:0;" v-if="!article.length"></wanl-empty>
		<!-- 加载更多 -->
		<view class="u-p-t-30 u-p-b-30" v-if="article.length"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		<!-- 分隔符 -->
		<u-gap height="80" v-if="article.length <= 4" bg-color="#f4f6f8"></u-gap>
		<!-- 发布文章 -->
		<fa-add-ask type="article" :icon-style="{color:theme.color}" :custom-style="{backgroundColor:theme.bgColor}"></fa-add-ask>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{color:theme.color}" :custom-style="{backgroundColor:theme.bgColor}"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import { swipers, styleRest } from '@/common/fa.mixin.js';
export default {
	mixins: [swipers, styleRest],
	onLoad() {
		this.getArticleIndex();
		this.getBanner()
	},
	onShow() {
		//是否需要更新列表，可能在详情里删除了，返回到列表页
		if (this.vuex_delete_article) {
			this.getArticleIndex();
			//更新后设置为ffalse
			this.$u.vuex('vuex_delete_article', false);
		}
	},
	data() {
		return {
			barwidth: 40,
			catewidth: 40,
			isCard: false,
			categoryList: [],
			current: 0,
			catecur: 0,
			article: [],
			scrollTop: 0,
			page: 1,
			has_more: false,
			category: '',
			type: '',
			status: 'loadmore',
			blockList: []
		};
	},
	methods: {		
		async getBanner() {
			await uni.request({
				url: '/publics/advert/content',
				method: 'post',
				data: {
					position:'ask_article_slider'
				},
				success: res => {
					this.blockList = res.data;
				}
			});
		},
		change(index) {
			this.current = index;
			//重设Bar宽度
			this.barwidth = this.$util.strlen(this.vuex_config.articleCate[index].name) * 30;
			this.type = this.vuex_config.articleCate[index].value;
			this.getArticleIndex();
		},
		cateChange(index) {
			this.catecur = index;
			//重设Bar宽度
			this.catewidth = this.$util.strlen(this.categoryList[index].name) * 30;
			this.category = this.categoryList[index].id;
			this.getArticleIndex();
		},
		getArticleIndex: async function() {
			this.page = 1;
			let res = await this.$api.getArticleIndex({
				type: this.type,
				category_id: this.category
			});
			uni.stopPullDownRefresh();
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			if (this.categoryList.length != res.data.categoryList.length + 1) {
				this.categoryList = [];
				this.categoryList = [{ name: '全部', id: 0 }, ...res.data.categoryList];
			}
			//分页简洁判断
			if(this.vuex_config.pagesimple.indexOf('article')!=-1){
				this.has_more = res.data.articleList.has_more;				
			}else{
				this.has_more = res.data.articleList.last_page>res.data.articleList.current_page;		
			}			
			res.data.articleList.data.map(this.setStyle);
			this.article = res.data.articleList.data;
		},
		getArticleList: async function() {
			let res = await this.$api.getArticleList({
				page: this.page,
				type: this.type,
				category_id: this.category,
				flag: 'flag'
			});
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			//分页简洁判断
			if(this.vuex_config.pagesimple.indexOf('article')!=-1){
				this.has_more = res.data.has_more;
			}else{
				this.has_more = res.data.last_page>res.data.current_page;
			}
			
			res.data.data.map(this.setStyle);
			this.article = [...this.article, ...res.data.data];
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	//下拉刷新
	onPullDownRefresh() {
		this.getArticleIndex();
	},
	//底部加载更多
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getArticleList();
		}
	}
};
</script>

<style>
page {
	background-color: #f4f6f8;
}
</style>

<style lang="scss">
	.banner {
		uni-swiper-item {
			overflow: hidden;
		}
	}
</style>